{% extends "school/layout.html" %}

{% set page_title = translate('班级管理') %}

{% block content %}
<style>
    .f-radio ul{
        position: relative;
        padding-top: 14px;
    }
    .f-radio ul:after{
        content: '';
        display: block;
        clear: both;
    }
    .name_tip{
        
        color: red;
    }
    .f-radio ul li{
        float: left;
        padding-right: 20px;
    }
    .norequired{
        margin: 8px 8px 0 2px;
    }
</style>
<div class="m-content">
<fieldset class="fieldset">
	<legend>{{translate('班级设置')}}</legend>
	<form class="form-horizontal" method="POST" id="{{ form.__class__.__name__ }}">
		{{ form.hidden_tag() }}
		<div id="role" class="hidden">{{ current_user.is_admin }}</div>
		<div class="form-group">
			<label class="control-label">{{ form.name.label(class_="norequired") }}:</label>
			{{ form.name(class_="form-control", required=True) }}
			{% if form.name.errors %}
			<div class="error">{{ form.name.errors[0] }}</div>
			{% endif %}
		</div>

		<div class="form-group">
			<label class="control-label">{{ form.teacher.label(class_="norequired") }}:</label>
			<select name="teacher" class="form-control" required>
				{% for option in form.teacher %}
					{{ option }}
				{% endfor %}	
			</select>
		</div>

		<div class="form-group">
			<label class="control-label">{{ form.classroom.label(class_="norequired") }}:</label>
			<select name="classroom" class="form-control" disabled="disabled" required>
				{% for option in form.classroom %}
					{{ option }}
				{% endfor %}	
			</select>
		</div>

        <div class="form-group f-radio" id="lesson_type_form">
            <label class="control-label"><label class="norequired" for="course_type">{{translate('课程类型')}}</label>:</label>
            <ul id="course_type">
                <li><input id="course_type-0" name="course_type" type="radio" disabled="disabled" value="course_children"> <label for="course_type-0">{{translate('儿童课程')}}</label></li>
                <li><input id="course_type-1" name="course_type" type="radio" disabled="disabled" value="course_adults"> <label for="course_type-1">{{translate('流行经典')}}</label></li>
                <li><input id="course_type-2" name="course_type" type="radio" disabled="disabled" value="course_xi_yang_hong"> <label for="course_type-2">{{translate('怀旧金曲')}}</label></li>
            </ul>
        </div>

		<div class="form-group f-radio">
            <label class="control-label">{{ form.name_type.label(class_="norequired") }}:</label>
            {{ form.name_type }}
        </div>

		<div class="form-group">
			<label class="control-label norequired" data-notkey="not">{{ form.students_in.label(class_="norequired") }}:</label>
			<div style="display:inline-block;width:40%;vertical-align:top;padding-top:15px;">
			{% if not form.students_in.choices %}
				<div>{{translate('该班级暂无学生')}}</div>
			{% else %}
				{% for option in form.students_in %}
				<div style="display:inline-block;width:30%;vertical-align:top;">{{option(checked=True)}}{{option.label(class_="norequired")}}</div>
				{% endfor %}
			{% endif %}
			</div>
		</div>

		<div class="form-group">
			<label class="control-label" for="studentNotVerified" data-notkey="not"><label style="margin-top:-6px;" class="norequired">{{translate('未分配学生')}}</label>:</label>
                <div class="m-studentlist-con" id="m-studentlist-con">

                </div>
			{% if form.students_has_verified.errors %}
			<div class="error">{{ form.students_has_verified.errors[0] }}</div>
			{% endif %}
		</div>

		<div>
			<button id="done" class="btn btn-primary">{{translate('确认添加')}}</button>
			<button id="return" class="btn btn-default">{{translate('返回')}}</button>
		</div>
	</form>
</fieldset>

</div>
{% endblock %}
{% block js %}
<script type="text/javascript">
    var is_selected_type = true;
	$('#return').bind('click', function(e){
		e.preventDefault();
		window.location.href = "{{ url_for('school.list_classes') }}";
	});
    function getStudents(){
        var finArr = [];
        $.ajax({
            type: 'get',
            url: '/school/classes/get_music_class_stu_info',
            cache: false,
            async: false,
            success: function(data){
                var d = JSON.parse(data);
                for(var i in d){
                    var is_ver = d[i].is_verified ? 'students_has_verified' : 'students_not_verified';
                    var course_type = d[i].course_type ? d[i].course_type : 'course_children';
                    var temp = '<div class="m-studentlist-item"><input name="'+is_ver+'" data-stulist="stulist" data-coursetype="'+course_type+'" type="checkbox" value="'+d[i].id+'" disabled="disabled"><label class="norequired">'+d[i].name+'</label></div>';
                    finArr.push(temp);
                }
            }
        });
        return finArr;
    }
    function renderList($con,arr){
        if(arr.length>0){
            for(var i in arr){
                $con.append(arr[i]);
            }
        }else{
            $con.append('<span>{{translate("暂无可分配学生")}}</span>')
        }
    }
    function studentFilter(course_type,is_ver){
        var courseStudent = $('input[data-coursetype="'+course_type+'"]') || [],
            verifyStudent = is_ver == 'students_has_verified' ? $('input[name="'+is_ver+'"]'):$('input[data-stulist="stulist"]'),
            finArr = [];

        if(courseStudent.length>0 && verifyStudent.length>0){
            for(var i = 0; i <  courseStudent.length; i++){
                if($.inArray(courseStudent[i], verifyStudent)!=-1){
                    finArr.push(courseStudent[i]);
                }
            }
        }else{
            return [];
        }
        return finArr;
    }
	// Role control
	$(function(){
		var labels = $('#MusicClassForm').find('label.control-label');
		for(var i = 0; i < labels.length; i++){
            if(labels[i].getAttribute('data-notkey')!=='not'){
                $(labels[i]).prepend('<span class="dot-tips">*</span>')
            }
        }
		var role = $('#role').text();
		var music_class_id = "{{ music_class.id }}";
		var is_exp_class = "{{ music_class.is_exp_class }}";
        var course_type = "{{ music_class.course_type }}";
        var lesson_type_form = $('#lesson_type_form');
        var studentCon = $('#m-studentlist-con');

        renderList(studentCon,getStudents());

        var studentList = $('input[data-stulist="stulist"]');


        if(localStorage.lang == 'lang=en'){//Oversea version Shield
            lesson_type_form.css('display','none');
            is_selected_course = true;
        }

		if(is_exp_class=='True'){
			$('#name_type-1').attr('disabled','disabled');
			$('#name_type-0')[0].checked = true;
            var avilableStudents = studentFilter(course_type,'students_not_verified');
            for(var j in avilableStudents){
                avilableStudents[j].removeAttribute('disabled');
            }
		}else if(is_exp_class=='False'){
			$('#name_type-0').attr('disabled','disabled');
			$('#name_type-1')[0].checked = true;
            var avilableStudents = studentFilter(course_type,'students_has_verified');
            for(var j in avilableStudents){
                avilableStudents[j].removeAttribute('disabled');
            }
		}else if(is_exp_class=='None'){
			is_selected_type = false;
		}

		if($('input[name="name_type"]:checked').length>0){
            if(!is_selected_type){
                is_selected_type = true;
                $('#name_type').append('<p class="name_tip">{{translate("*班级类型一旦选择不可更改")}}</p>');
            }
            for(var i = 0; i < studentList.length; i++){
                studentList[i].checked = false;
                studentList[i].disabled = true;
            }
            if($('input[name="name_type"]:checked')[0].value == 'exp_class'){
                var avilableStudents = studentFilter(course_type,'students_not_verified');
                for(var j in avilableStudents){
                    avilableStudents[j].removeAttribute('disabled');
                }
            }else{
                var avilableStudents = studentFilter(course_type,'students_has_verified');
                for(var j in avilableStudents){
                    avilableStudents[j].removeAttribute('disabled');
                }
            }
        }

        if(course_type == 'course_children'){
            $('#course_type-0').removeAttr('disabled');
            $('#course_type-0')[0].checked = true;
        }else if(course_type == 'course_adults'){
            $('#course_type-1').removeAttr('disabled');
            $('#course_type-1')[0].checked = true;
        }else if(course_type == 'course_xi_yang_hong'){
            $('#course_type-2').removeAttr('disabled');
            $('#course_type-2')[0].checked = true;
        }

		$('input[name="name_type"]').change(function(){
	        if(!is_selected_type){
	            is_selected_type = true;
	            $('#name_type').append('<p class="name_tip">{{translate("*班级类型一旦选择不可更改")}}</p>');
	        }
	        for(var i = 0; i < studentList.length; i++){
                studentList[i].checked = false;
                studentList[i].disabled = true;
            }
            if(this.value == 'exp_class'){
                var avilableStudents = studentFilter(course_type,'students_not_verified');
                for(var j in avilableStudents){
                    avilableStudents[j].removeAttribute('disabled');
                }
            }else{
                var avilableStudents = studentFilter(course_type,'students_has_verified');
                for(var j in avilableStudents){
                    avilableStudents[j].removeAttribute('disabled');
                }
            }
	    })
		$('#done').click(function(e){
			if(!is_selected_type){
				e.preventDefault();
				kalert('{{translate("未选择班级类型")}}');
			}
		})
		if (role == "False"){
			$("form input").attr('disabled', true);
			$('select').attr('disabled', true);
			$('.btn-primary').remove();
		}
	});
</script>
{% endblock %}
